<template>
  <nut-tabbar
    v-if="isShowTabbar"
    :unactive-color="unactiveColor"
    :active-color="activeColor"
    :model-value="activeTab"
    @tab-switch="onTabSwitch"
    bottom
    safe-area-inset-bottom
    :customStyle="{ borderRadius: '20rpx 20rpx 0 0' }"
    placeholder>
    <nut-tabbar-item v-for="(item, index) in tabbarList" :key="index">
      <template>
        <view
          :class="{
            'mid-bar-item w-140rpx h-140rpx flex flex-col justify-end items-center pt-12rpx flex-shrink-0 box-border':
              midButton && index === 2 && tabbarList.length === 5
          }">
          <img
            class="w-46rpx h-46rpx"
            :class="{
              'w-102rpx!': midButton && index === 2 && tabbarList.length === 5,
              'h-92rpx!': midButton && index === 2 && tabbarList.length === 5
            }"
            v-if="activeTab === index"
            :src="item.selectImg" />
          <img
            class="w-46rpx h-46rpx"
            :class="{
              'w-102rpx!': midButton && index === 2 && tabbarList.length === 5,
              'h-92rpx!': midButton && index === 2 && tabbarList.length === 5
            }"
            v-else
            :src="item.unselectImg" />
          <view class="text-20rpx mt-6rpx">
            {{ item.navigateName }}
          </view>
        </view>
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup lang="ts">
import { useTabbarStore } from '@/store'
import { onShow } from '@dcloudio/uni-app'
const isShowTabbar = ref(true)
const tabbarStore = useTabbarStore()
const tabbarList = computed(() => tabbarStore.tabbarList)
const activeTab = computed(() => tabbarStore.activeTab)
const activeColor = computed(() => tabbarStore.activeColor)
const unactiveColor = computed(() => tabbarStore.unactiveColor)
const midButton = ref(true) // 是否启用5个按钮时, 第三个按钮凸起
const onTabSwitch = (item: any, index: number) => {
  tabbarStore.tabSwitch(index)
}
const updateActive = () => {
  const pages = getCurrentPages() // 获取当前页面栈
  const currentPage = pages[pages.length - 1] // 当前页面
  const currentPath = `/${currentPage.route}` // 获取当前页面路径
  const index = tabbarList.value.findIndex((item) => item.linkUrl === currentPath)
  if (currentPath !== '/pages/index' && currentPath !== '/pages/tabbar/mine') {
    isShowTabbar.value = index !== -1
    if (isShowTabbar.value) {
      uni.hideHomeButton()
    }
    
  }

  if (index !== -1 && index !== activeTab.value) {
    tabbarStore.setActiveTab(index)
  }
}
onShow(() => {
  updateActive()
})
</script>
<style>
page {
  --nut-tabbar-border-top: 1px solid #fff;
  --nut-tabbar-height: 60px;
}
</style>
<style scoped lang="scss">
.mid-bar-item {
  transform: translateY(-30rpx);
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;
}
</style>
